<script lang="ts">
import { isFunction } from '@peng_kai/kit/libs/lodash-es';
</script>

<script lang="ts" setup>
export interface IList { title: string; content: string | (() => VNode) }

const qaqList = computed(() => [
  {
    title: 'What is an Affiliate Program?',
    content: 'Affiliate Program is a partnership between you and the operator - G9.game. Being part of the affiliate program the operators pay you a commission for every referred customer that is active on the platform.',
  },
  {
    title: 'Commission plan',
    content: 'Revenue Share up to 60%. CPA and Hybrid options available. Please contact your manager using the details in your welcome email.',
  },
  {
    title: 'How do I earn money with your program?',
    content: 'Whenever a player registers through the tracking link provided to you and wagers money – you will earn a percentage of that player ́s monthly losses.',
  },
  {
    title: 'How can I keep track of my performance?',
    content: 'You can track your performance by logging into the G9.game platform. On the main dashboard, you have all the relevant information and for more in-depth analysis we have a special “Reports” section.',
  },
  {
    title: 'How can I add signed up sub-affiliates?',
    content: 'You have a dedicated “Sub-affiliates” section. With a dedicated sub-affiliate tracking link you can refer other partners, influencers, friends and professional affiliates to join our program. The affiliates signed up with your link will start automatically generating commission for you when they become active as a partner in our program.',
  },
  {
    title: 'How often are my statistics being updated?',
    content: 'The statistics on your affiliate dashboard are updated hourly, so you’ll always be seeing accurate numbers within the hour when you log in. Clicks and Impression data get recorded in real time for when you want to test campaigns prior to going live.',
  },
  {
    title: 'How do I earn commission?',
    content: 'When you refer to a player, this player becomes linked to your affiliate account. When your players wager real money and generate revenue for our brand, you earn a percentage of that revenue which is generated.',
  },
]);
const activeRef = defineModel<string | number>('active');
function RenderContent({ content }: { content: IList['content'] }) {
  if (!content)
    return null;
  if (isFunction(content))
    return content();
  const regex = /<[^>]+>/g;
  return regex.test(content) ? h('div', { innerHTML: content }) : content;
}
</script>

<template>
  <div class="faq">
    <div class="container">
      <h1 class="mb-6 text-8 font-900 lt-tablet:(text-center text-6)">
        FAQ
      </h1>
      <ACollapse v-model="activeRef" accordion :border="true" class="ant-cover__collapse" expandIconPosition="end" :bordered="false">
        <ACollapsePanel
          v-for=" (item, idx) of qaqList"
          :key="idx "
          :name="idx"
          class="ant-cover__collapse-panel"
          :titleClass="$bp.ltTabletl ? 'text-3.5' : 'text-5'"
          :border="false"
        >
          <template #header>
            <div class="text-4 font-600 lt-tablet:text-3.5">
              {{ item.title }}
            </div>
          </template>
          <p class="text-4 text-sys-text-body lt-tabletl:text-3">
            <RenderContent :content="item.content" />
          </p>
        </ACollapsePanel>
      </ACollapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ant-collapse-borderless {
  background-color: transparent;
}
</style>
